<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* 断点
  xs: <576px
  sm: 576px-992px
  md: 992px-1200px
  xl: >1200px
  断点是怎么来的
    改变屏幕大小，当页面显示不正常的时候，就需要设置断点
  */
  @media (max-width: 576px) {
    .col {
      width: 100%;
    }
  }

  @media (min-width: 577px) and (max-width: 768px) {
    .col {
      width: 50%;
    }
  }

  @media (min-width: 769px) and (max-width: 992px) {
    .col {
      width: 25%;
    }
  }

  @media (min-width: 993px) and (max-width: 1200px) {
    .col {
      width: 16.66666667%;
    }
  }

  @media (min-width: 1201px) {
    .col {
      width: 8.33333333%;
    }
  }

  /* pc first */
  .col {
    width: 8.3333333%;
  }

  @media (max-width: 1200px) {
    .col {
      width: 16.6666667%;
    }
  }

  @media (max-width: 992px) {
    .col {
      width: 25%;
    }
  }

  @media (max-width: 768px) {
    .col {
      width: 50%;
    }
  }

  @media (max-width: 576px) {
    .col {
      width: 100%;
    }
  }

  /* mobile first */

  .col {
    width: 100%;
  }

  @media (min-width: 576px) {
    .col {
      width: 50%;
    }
  }

  @media (min-width: 768px) {
    .col {
      width: 25%;
    }
  }

  @media (min-width: 992px) {
    .col {
      width: 16.6666667%;
    }
  }

  @media (min-width: 576px) {
    .col {
      width: 8.33333333%;
    }
  }
</style>

<body>

</body>

</html>